<template>
  <div>
    <el-dialog v-model="loginDialogVisible" title="用户登录" width="500" center>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" @submit.prevent="handleLogin">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="loginForm.uname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="pwd">
          <el-input type="password" v-model="loginForm.pwd" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="captcha">
          <div style="display: flex; align-items: center;">
            <el-input v-model="loginForm.captcha" placeholder="请输入验证码" style="flex: 1;"></el-input>
            <img :src="captchaUrl" alt="验证码" style="width: 100px; height: 40px; margin-left: 10px; cursor: pointer;"
                 @click="refreshCaptcha">
          </div>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" native-type="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {ref} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
import apiClient from "@/api";

export default {
  data() {
    return {
      //  登录所需要的属性

      //  登录的对话框
      loginDialogVisible: false,

      //  登录绑定的表单
      loginForm: {
        username: '',
        password: '',
        captcha: ''
      },
      //  登录的正则
      loginRules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        captcha: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      },
      //  登录请求的验证码
      captchaUrl: '/api/PicCode',
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          apiClient.post("/api/login", this.loginForm).then(res => {
            if (res.code == 200) {
              this.$message({type: "success", message: "登录成功"});
              this.currentUser = res.serverData;
              console.log("登录成功", res.serverData);


              //  使用vuex 全局的保存用户
              // 调用 Vuex 的 action 来保存用户信息

              this.$store.dispatch('updateUserInfo', res.serverData);


              // 更新头像路径
              this.imagepath = "/api/" + res.serverData.userinfo.imagepath + `?t=${Date.now()}`;

              // 显示昵称
              this.shownickname = true;

              // 隐藏登录按钮
              this.loginbutton = false;
              // 关闭登录对话框
              this.loginDialogVisible = false;
            } else {
              throw Error("密码错误");
            }
          }).catch(err => {
            this.$message.error('登录失败，请检查用户名、密码或验证码');
            this.refreshCaptcha();
          });
        } else {
          this.$message.error('信息内容错误');
        }
      });
    },
  }

}


</script>